<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en" class="fly-html-layui fly-html-store">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/front/layui/dist/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/front/css/global.css" charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/front/css/global(1).css" charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/front/css/store.css" charset="utf-8">
    <link rel="icon" href="${pageContext.request.contextPath}/statics/front/images/favicon.ico">
    <title>详情-校园球场预定系统</title>
<body>
<!-- 顶部start -->
<div class="layui-header header header-store" style="background-color: #393D49;">
    <div class="layui-container">
        <a class="logo" href="index.html">
            <img src="${pageContext.request.contextPath}/statics/front/images/logo.png" alt="layui">
        </a>
        <div class="layui-form component" lay-filter="LAY-site-header-component"></div>
        <ul class="layui-nav" id="layui-nav-userinfo">
            <li data-id="index" class="layui-nav-item layui-hide-xs"><a class="fly-case-active" data-type="toTopNav"
                                                                        href="/index.html">首页</a></li>
            <li data-id="room" class="layui-nav-item layui-hide-xs layui-this"><a class="fly-case-active"
                                                                                  data-type="toTopNav"
                                                                                  href="/court/list">球场</a></li>
            <li data-id="login" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                         href="/login.jsp">登入</a></li>
            <li data-id="register" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                            href="/register.jsp">注册</a></li>
            <span class="layui-nav-bar" style="left: 560px; top: 55px; width: 0px; opacity: 0;"></span></ul>
    </div>
</div>
<!-- 顶部end -->

<!-- 中间区域开始 -->
<div class="shop-nav shop-index">
    <!--搜索 start-->
    <div id="LAY-topbar" style="height: auto;">
        <form class="layui-form layuimini-form">
            <div class="input-search">
                <div id="searchRoom"><input type="text" placeholder="搜索" name="keywords" id="searchKeywords"
                                            autocomplete="off" value="">
                    <button class="layui-btn layui-btn-shop" lay-submit="" lay-filter="searchHotelRoom" style="background-color: #009688"><i
                            class="layui-icon layui-icon-search"></i></button>
                </div>
                <div class="layui-container layui-hide-xs"><a href="#" class="topbar-logo"> <img
                        src="${pageContext.request.contextPath}/statics/front/images/logo-1.png" alt="layui"> </a></div>
            </div>
        </form>
    </div>
    <!--搜索 end-->

</div>
<!-- 中间区域结束 -->

<!-- 房间详情start -->
<div class="layui-container shopdata">
    <div class="layui-card shopdata-intro">
        <div class="layui-card-header">
				<span class="layui-breadcrumb layui-hide-xs" style="visibility: visible;">
				<a href="../hotel/index.html">球场首页</a><span lay-separator="">/</span>
						           <a href="JavaScript:void(0);" id="floorNumber">球场</a><span lay-separator="">/</span>

						 <a><cite>球场详情</cite></a> </span>

        </div>
        <div class="layui-card-body layui-row">
            <div class="layui-col-md6">
                <div class="intro-img photos"> <img id="coverImg" src="/court/show/${court.courtPhoto}" alt="球场封面" layer-index="0"> </div>
            </div>
            <div class="layui-col-md6">
                <div class="intro-txt">
                    <h1 class="title" id="courtName">${court.typeName}</h1>
                    <input type="hidden" id="courtId" name="courtId" value="1">
                    <div class="store-attrs">
                        <div class="summary">
                            <p class="reference"><span>球场编号</span> <span id="courtId1">NO.${court.courtId}</span></p>
                            <p class="reference"><span>球场大小</span> <span id="courtSize">${court.courtSize}</span></p>
                            <p class="reference"><span>容纳人数</span> <span id="courtNumber">${court.courtNumber}人</span></p>
                            <p class="reference"><span>开放时间</span> <span id="courtTime">${court.courtTime}</span></p>
                            <p class="activity"><span>球场地址</span>  <span id="courtAddress">${court.courtAddress}</span></p>
                            <p class="activity"><span>状&#12288;&#12288;态</span>    <strong class="courtStatus"><span><font color="red">${court.courtStatusStr}</font></span></strong></p>
                        </div>
                    </div>

                    <p class="store-detail-active" id="shopEvent">
                        <%-- 隐藏域，保存当前登录用户的ID值 --%>
                        <input type="hidden" id="vipId" value="${sessionScope.front_login_user}">

                        <c:if test="${court.courtStatus==0}">
                            <a href="javascript:;" id="bookRoomBtn" data-type="memberReserveHotel" class="store-bg-green fly-memberReserveHotel">
                                <i class="layui-icon layui-icon-auz"></i>立即预约 </a>
                        </c:if>
                        <c:if test="${court.courtStatus!=0}">
                            <a href="javascript:;" id="bookRoomBtn2" data-type="memberReserveHotel" class="store-bg-orange fly-memberReserveHotel">
                                <i class="layui-icon layui-icon-auz"></i>立即预约 </a>
                        </c:if>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card shopdata-content">
        <div class="layui-card-body detail-body layui-text">
            <div class="layui-elem-quote"> ${room.roomrequirement}</div>
            <div id="roomContent">
                ${room.roomdesc}
            </div>
        </div>
    </div>
</div>
<!-- 房间详情end -->

<%-- 预订房间窗口 --%>
<div style="display: none;padding: 5px" id="orderRoomWindow">
    <form class="layui-form" style="width:90%;" id="dataFrm" lay-filter="dataFrm">
        <%-- 添加3个隐藏域，分别保存用户ID、房间ID、房型ID --%>
            <input type="hidden" name="releaseId" value="${court.courtId}">
            <input type="hidden" name="reserveVipNo" value="${sessionScope.front_login_user.vipId}">
            <input type="hidden" name="releaseCourtType" value="${court.courtType}">
            <input type="hidden" name="releaseCourtSize" value="${court.courtSize}">
            <input type="hidden" name="releaseCourtNumber" value="${court.courtNumber}">
            <input type="hidden" name="releaseCourtTime" value="${court.courtTime}">
            <input type="hidden" name="releaseCourtAddress" value="${court.courtAddress}">



        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="reserveVipName" lay-verify="required" autocomplete="off" placeholder="请输入姓名"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">年级</label>
                <div class="layui-input-inline">
                    <input type="text" name="reserveVipGrade"  lay-verify="required" autocomplete="off" placeholder="请输入年级"
                           class="layui-input">
                </div>
            </div>
        </div>



        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">专业</label>
                <div class="layui-input-inline">
                    <input type="text" name="reserveVipMajor"  lay-verify="required" autocomplete="off" placeholder="请输入专业"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">学院</label>
                <div class="layui-input-inline">
                    <input type="text" name="reserveVipCollege" lay-verify="required"  autocomplete="off" placeholder="请输入学院"
                           class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="text" name="reserveVipPhone" lay-verify="required" autocomplete="off" placeholder="电话"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="margin-left: 80px">
            <span style="color: red;font-size: 16px;">预约须知：按时到场，不得超时</span>
        </div>

        <div class="layui-form-item layui-row layui-col-xs12">
            <div class="layui-input-block" style="text-align: center;">
                <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit"><span
                        class="layui-icon layui-icon-add-1"></span>提交
                </button>
                <button type="reset" class="layui-btn layui-btn-warm"><span
                        class="layui-icon layui-icon-refresh-1"></span>重置
                </button>
            </div>
        </div>
    </form>
</div>

<!-- 底部 -->
<div class="fly-footer">
    <p><a href="#">校园球场预定系统</a> 2022 © <a href="#">SPORT</a></p>
    <p>
        友情链接
        <a href="https://gitee.com/chenjiaxindashuaider/csrsystem" target="_blank">开源地址</a>
        <a href="https://www.meiye.art/" target="_blank">美叶</a>
        <a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a>
        <a href="https://www.scuec.edu.cn/" target="_blank">中南民族大学</a>
    </p>

</div>


<!-- 脚本开始 -->
<script src="${pageContext.request.contextPath}/statics/front/layui/dist/layui.js"></script>
<script>
    layui.use(["form","element","carousel","layer","laydate"], function () {
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            carousel = layui.carousel,
            laydate = layui.laydate,
            $ = layui.$;

        //渲染轮播图
        carousel.render({
            elem: '#LAY-store-banner'
            ,width: '100%' //设置容器宽度
            ,height: '460' //设置容器高度
            ,arrow: 'always' //始终显示箭头
        });




        var mainIndex;

        //点击立即预订按钮触发点击事件
        $("#bookRoomBtn").click(function () {
            //获取隐藏域中的用户ID值
            var vipFrond = $("#vipId").val();
            //判断用户是否已经登录
            if(vipFrond=="" || vipFrond.length==0){
                //layer.alert("您还没有登录，请先登录！");
                alert("您还没有登录，请先登录！")
                location.href="/login.jsp";
            }
            //打开预订房间窗口
            mainIndex = layer.open({
                type: 1,//打开类型
                title: "预订房间",//窗口标题
                area: ["800px", "400px"],//窗口宽高
                content: $("#orderRoomWindow"),//引用的内容窗口
                success: function () {
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                }
            });
        });


        $("#bookRoomBtn2").click(function () {
            layer.alert("该球场已被预约",{icon:5});
        });

        //监听表单提交事件
        form.on("submit(doSubmit)",function (data) {
            console.log(data.field)
            $.post("/release/addRelease",data.field,function(result){
                if(result.success){
                    layer.alert(result.message,{icon:6});
                    //关闭窗口
                     layer.close(mainIndex);
                    //刷新页面
                    window.location.reload();
                }else{
                    layer.alert(result.message,{icon:5});
                }
            },"json");

            return false;
        });



    });
</script>
<!-- 脚本结束 -->
<ul class="layui-fixbar">
    <li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li>
</ul>
<div class="layui-layer-move"></div>

</body>
</html>
